<template>
  <div class="processing-info">
    <!-- 深加工信息 -->
    <div class="info-section">
      <div class="info-header">
        <h4 class="info-title">深加工信息 <span class="info-count">设置 {{ Object.keys(localData).length }}</span></h4>
        <div class="info-actions">
          <el-button v-if="!editing" type="primary" size="small" @click="onEdit">
            <el-icon><Setting /></el-icon>
            设置
          </el-button>
          <template v-else>
            <el-button type="success" size="small" @click="onSave">
              <el-icon><View /></el-icon>
              保存
            </el-button>
            <el-button type="info" size="small" @click="onCancel">
              <el-icon><Close /></el-icon>
              取消
            </el-button>
          </template>
        </div>
      </div>
      <div class="info-grid">
        <div class="info-item">
          <label>班组:</label>
          <el-input 
            v-if="editing" 
            v-model="localData.team" 
            size="small" 
            placeholder="请输入班组"
            maxlength="50"
          />
          <span v-else>{{ localData.team || '暂无数据' }}</span>
        </div>
        <div class="info-item">
          <label>负责人:</label>
          <el-input 
            v-if="editing" 
            v-model="localData.responsiblePerson" 
            size="small" 
            placeholder="请输入负责人"
            maxlength="30"
          />
          <span v-else>{{ localData.responsiblePerson || '暂无数据' }}</span>
        </div>
      </div>
    </div>

    <!-- 食品安全信息 -->
    <div class="info-section">
      <h4 class="info-title">食品安全信息</h4>
      
      <!-- 人员卫生情况 -->
      <div class="sub-section">
        <h5 class="sub-title">人员卫生情况</h5>
        <div class="photo-gallery">
          <div v-for="photo in personnelHygienePhotos" :key="photo.id" class="photo-item">
            <el-image :src="photo.url" fit="cover" class="photo-img">
              <template #error>
                <div class="image-placeholder">
                  <el-icon><Picture /></el-icon>
                </div>
              </template>
            </el-image>
            <el-button 
              type="danger" 
              size="small" 
              circle 
              class="remove-btn"
              @click="removePersonnelHygienePhoto(photo)"
            >
              <el-icon><Close /></el-icon>
            </el-button>
          </div>
          <div class="add-photo" v-if="personnelHygienePhotos.length < 9">
            <el-upload
              action="#"
              :show-file-list="false"
              :before-upload="handlePersonnelHygieneUpload"
              accept="image/*"
              :disabled="personnelHygienePhotos.length >= 9"
            >
              <div class="upload-area">
                <el-icon><Plus /></el-icon>
                <div>新增</div>
                <div class="upload-tip">最多9张照片</div>
              </div>
            </el-upload>
          </div>
        </div>
        
        <!-- 操作按钮 -->
        <div class="action-buttons">
          <el-button type="primary" size="small">人员卫生情况</el-button>
          <el-button type="primary" size="small">抽检报告</el-button>
        </div>
      </div>
    </div>

    <!-- 供应商信息 -->
    <div class="info-section">
      <h4 class="info-title">供应商信息</h4>
      
      <!-- 原料 -->
      <div class="supplier-subsection">
        <div class="supplier-header">
          <h5 class="supplier-title">原料</h5>
          <div class="supplier-actions">
            <el-button v-if="!editingRawMaterials" type="primary" size="small" @click="editRawMaterials">
              <el-icon><Setting /></el-icon>
              设置
            </el-button>
            <template v-else>
              <el-button type="success" size="small" @click="saveRawMaterials">
                <el-icon><View /></el-icon>
                保存
              </el-button>
              <el-button type="info" size="small" @click="cancelRawMaterials">
                <el-icon><Close /></el-icon>
                取消
              </el-button>
            </template>
          </div>
        </div>
        
        <div class="supplier-content">
          <div class="supplier-info">
            <label>生产批次:</label>
            <el-input 
              v-if="editingRawMaterials" 
              v-model="rawMaterialsData.batch" 
              size="small" 
              placeholder="请输入生产批次"
              maxlength="20"
            />
            <span v-else>{{ rawMaterialsData.batch || '暂无数据' }}</span>
          </div>
          
          <div class="materials-section">
            <label>相关材料:</label>
            <div class="materials-gallery">
              <div v-for="material in rawMaterialsDocuments" :key="material.id" class="material-item">
                <el-image :src="material.url" fit="cover" class="material-img">
                  <template #error>
                    <div class="image-placeholder">
                      <el-icon><Document /></el-icon>
                    </div>
                  </template>
                </el-image>
                <el-button 
                  type="danger" 
                  size="small" 
                  circle 
                  class="remove-btn"
                  @click="removeRawMaterial(material)"
                >
                  <el-icon><Close /></el-icon>
                </el-button>
              </div>
              <div class="add-material" v-if="rawMaterialsDocuments.length < 9">
                <el-upload
                  action="#"
                  :show-file-list="false"
                  :before-upload="handleRawMaterialUpload"
                  accept="image/*"
                  :disabled="rawMaterialsDocuments.length >= 9"
                >
                  <div class="upload-area">
                    <el-icon><Plus /></el-icon>
                    <div>新增</div>
                    <div class="upload-tip">最多9张照片</div>
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
          
          <!-- 操作按钮 -->
          <div class="action-buttons">
            <el-button type="primary" size="small">检验报告</el-button>
            <el-button type="primary" size="small">进厂验收记录</el-button>
            <el-button type="primary" size="small">供应商资质</el-button>
          </div>
        </div>
      </div>

      <!-- 辅料 -->
      <div class="supplier-subsection">
        <div class="supplier-header">
          <h5 class="supplier-title">辅料</h5>
          <div class="supplier-actions">
            <el-button v-if="!editingAuxiliaryMaterials" type="primary" size="small" @click="editAuxiliaryMaterials">
              <el-icon><Setting /></el-icon>
              设置
            </el-button>
            <template v-else>
              <el-button type="success" size="small" @click="saveAuxiliaryMaterials">
                <el-icon><View /></el-icon>
                保存
              </el-button>
              <el-button type="info" size="small" @click="cancelAuxiliaryMaterials">
                <el-icon><Close /></el-icon>
                取消
              </el-button>
            </template>
          </div>
        </div>
        
        <div class="supplier-content">
          <div class="supplier-info">
            <label>生产批次:</label>
            <el-input 
              v-if="editingAuxiliaryMaterials" 
              v-model="auxiliaryMaterialsData.batch" 
              size="small" 
              placeholder="请输入生产批次"
              maxlength="20"
            />
            <span v-else>{{ auxiliaryMaterialsData.batch || '暂无数据' }}</span>
          </div>
          
          <div class="materials-section">
            <label>相关材料:</label>
            <div class="materials-gallery">
              <div v-for="material in auxiliaryMaterialsDocuments" :key="material.id" class="material-item">
                <el-image :src="material.url" fit="cover" class="material-img">
                  <template #error>
                    <div class="image-placeholder">
                      <el-icon><Document /></el-icon>
                    </div>
                  </template>
                </el-image>
                <el-button 
                  type="danger" 
                  size="small" 
                  circle 
                  class="remove-btn"
                  @click="removeAuxiliaryMaterial(material)"
                >
                  <el-icon><Close /></el-icon>
                </el-button>
              </div>
              <div class="add-material" v-if="auxiliaryMaterialsDocuments.length < 9">
                <el-upload
                  action="#"
                  :show-file-list="false"
                  :before-upload="handleAuxiliaryMaterialUpload"
                  accept="image/*"
                  :disabled="auxiliaryMaterialsDocuments.length >= 9"
                >
                  <div class="upload-area">
                    <el-icon><Plus /></el-icon>
                    <div>新增</div>
                    <div class="upload-tip">最多9张照片</div>
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
          
          <!-- 操作按钮 -->
          <div class="action-buttons">
            <el-button type="primary" size="small">检验报告</el-button>
            <el-button type="primary" size="small">进厂验收记录</el-button>
            <el-button type="primary" size="small">供应商资质</el-button>
          </div>
        </div>
      </div>

      <!-- 添加剂 -->
      <div class="supplier-subsection">
        <div class="supplier-header">
          <h5 class="supplier-title">添加剂</h5>
          <div class="supplier-actions">
            <el-button v-if="!editingAdditives" type="primary" size="small" @click="editAdditives">
              <el-icon><Setting /></el-icon>
              设置
            </el-button>
            <template v-else>
              <el-button type="success" size="small" @click="saveAdditives">
                <el-icon><View /></el-icon>
                保存
              </el-button>
              <el-button type="info" size="small" @click="cancelAdditives">
                <el-icon><Close /></el-icon>
                取消
              </el-button>
            </template>
          </div>
        </div>
        
        <div class="supplier-content">
          <div class="supplier-info">
            <label>生产批次:</label>
            <el-input 
              v-if="editingAdditives" 
              v-model="additivesData.batch" 
              size="small" 
              placeholder="请输入生产批次"
              maxlength="20"
            />
            <span v-else>{{ additivesData.batch || '暂无数据' }}</span>
          </div>
          
          <div class="materials-section">
            <label>相关材料:</label>
            <div class="materials-gallery">
              <div v-for="material in additivesDocuments" :key="material.id" class="material-item">
                <el-image :src="material.url" fit="cover" class="material-img">
                  <template #error>
                    <div class="image-placeholder">
                      <el-icon><Document /></el-icon>
                    </div>
                  </template>
                </el-image>
                <el-button 
                  type="danger" 
                  size="small" 
                  circle 
                  class="remove-btn"
                  @click="removeAdditive(material)"
                >
                  <el-icon><Close /></el-icon>
                </el-button>
              </div>
              <div class="add-material" v-if="additivesDocuments.length < 9">
                <el-upload
                  action="#"
                  :show-file-list="false"
                  :before-upload="handleAdditiveUpload"
                  accept="image/*"
                  :disabled="additivesDocuments.length >= 9"
                >
                  <div class="upload-area">
                    <el-icon><Plus /></el-icon>
                    <div>新增</div>
                    <div class="upload-tip">最多9张照片</div>
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
          
          <!-- 操作按钮 -->
          <div class="action-buttons">
            <el-button type="primary" size="small">检验报告</el-button>
            <el-button type="primary" size="small">进厂验收记录</el-button>
            <el-button type="primary" size="small">供应商资质</el-button>
          </div>
        </div>
      </div>

      <!-- 包材 -->
      <div class="supplier-subsection">
        <div class="supplier-header">
          <h5 class="supplier-title">包材</h5>
          <div class="supplier-actions">
            <el-button v-if="!editingPackagingMaterials" type="primary" size="small" @click="editPackagingMaterials">
              <el-icon><Setting /></el-icon>
              设置
            </el-button>
            <template v-else>
              <el-button type="success" size="small" @click="savePackagingMaterials">
                <el-icon><View /></el-icon>
                保存
              </el-button>
              <el-button type="info" size="small" @click="cancelPackagingMaterials">
                <el-icon><Close /></el-icon>
                取消
              </el-button>
            </template>
          </div>
        </div>
        
        <div class="supplier-content">
          <div class="supplier-info">
            <label>生产批次:</label>
            <el-input 
              v-if="editingPackagingMaterials" 
              v-model="packagingMaterialsData.batch" 
              size="small" 
              placeholder="请输入生产批次"
              maxlength="20"
            />
            <span v-else>{{ packagingMaterialsData.batch || '暂无数据' }}</span>
          </div>
          
          <div class="materials-section">
            <label>相关材料:</label>
            <div class="materials-gallery">
              <div v-for="material in packagingMaterialsDocuments" :key="material.id" class="material-item">
                <el-image :src="material.url" fit="cover" class="material-img">
                  <template #error>
                    <div class="image-placeholder">
                      <el-icon><Document /></el-icon>
                    </div>
                  </template>
                </el-image>
                <el-button 
                  type="danger" 
                  size="small" 
                  circle 
                  class="remove-btn"
                  @click="removePackagingMaterial(material)"
                >
                  <el-icon><Close /></el-icon>
                </el-button>
              </div>
              <div class="add-material" v-if="packagingMaterialsDocuments.length < 9">
                <el-upload
                  action="#"
                  :show-file-list="false"
                  :before-upload="handlePackagingMaterialUpload"
                  accept="image/*"
                  :disabled="packagingMaterialsDocuments.length >= 9"
                >
                  <div class="upload-area">
                    <el-icon><Plus /></el-icon>
                    <div>新增</div>
                    <div class="upload-tip">最多9张照片</div>
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
          
          <!-- 操作按钮 -->
          <div class="action-buttons">
            <el-button type="primary" size="small">检验报告</el-button>
            <el-button type="primary" size="small">进厂验收记录</el-button>
            <el-button type="primary" size="small">供应商资质</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 企业信息 -->
    <div class="info-section">
      <div class="info-header">
        <h4 class="info-title">企业信息 <span class="info-count">设置 {{ Object.keys(enterpriseData).length }}</span></h4>
        <div class="info-actions">
          <el-button v-if="!editingEnterprise" type="primary" size="small" @click="editEnterprise">
            <el-icon><Setting /></el-icon>
            设置
          </el-button>
          <template v-else>
            <el-button type="success" size="small" @click="saveEnterprise">
              <el-icon><View /></el-icon>
              保存
            </el-button>
            <el-button type="info" size="small" @click="cancelEnterprise">
              <el-icon><Close /></el-icon>
              取消
            </el-button>
          </template>
        </div>
      </div>
      <div class="info-grid">
        <div class="info-item">
          <label>公司名称:</label>
          <el-input 
            v-if="editingEnterprise" 
            v-model="enterpriseData.companyName" 
            size="small" 
            placeholder="请输入公司名称"
            maxlength="100"
          />
          <span v-else>{{ enterpriseData.companyName || '暂无数据' }}</span>
        </div>
        <div class="info-item">
          <label>生产许可证号:</label>
          <el-input 
            v-if="editingEnterprise" 
            v-model="enterpriseData.productionLicenseNumber" 
            size="small" 
            placeholder="请输入生产许可证号"
            maxlength="50"
          />
          <span v-else>{{ enterpriseData.productionLicenseNumber || '暂无数据' }}</span>
        </div>
      </div>
      
      <!-- 企业照片 -->
      <div class="enterprise-photos">
        <h5 class="sub-title">企业照片</h5>
        <div class="photo-gallery">
          <div v-for="photo in enterprisePhotos" :key="photo.id" class="photo-item">
            <el-image :src="photo.url" fit="cover" class="photo-img">
              <template #error>
                <div class="image-placeholder">
                  <el-icon><Picture /></el-icon>
                </div>
              </template>
            </el-image>
            <el-button 
              type="danger" 
              size="small" 
              circle 
              class="remove-btn"
              @click="removePhoto(photo)"
            >
              <el-icon><Close /></el-icon>
            </el-button>
          </div>
          <div class="add-photo" v-if="enterprisePhotos.length < 9">
            <el-upload
              action="#"
              :show-file-list="false"
              :before-upload="handlePhotoUpload"
              accept="image/*"
              :disabled="enterprisePhotos.length >= 9"
            >
              <div class="upload-area">
                <el-icon><Plus /></el-icon>
                <div>新增</div>
                <div class="upload-tip">最多9张照片</div>
              </div>
            </el-upload>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, defineProps, defineEmits } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Setting,
  View,
  Close,
  Plus,
  Document,
  Picture
} from '@element-plus/icons-vue'

const props = defineProps<{ 
  data: any,
  personnelHygienePhotos: any[],
  supplierInfoPhotos: any[],
  enterpriseData: any,
  enterprisePhotos: any[]
}>()

const emit = defineEmits(['save', 'cancel', 'updatePersonnelHygiene', 'updateSupplierInfo', 'updateEnterprise', 'updatePhotos'])

const editing = ref(false)
const editingEnterprise = ref(false)
const editingRawMaterials = ref(false)
const editingAuxiliaryMaterials = ref(false)
const editingAdditives = ref(false)
const editingPackagingMaterials = ref(false)

const localData = ref({ ...props.data })
const personnelHygienePhotos = ref([...props.personnelHygienePhotos])
const supplierInfoPhotos = ref([...props.supplierInfoPhotos])
const enterpriseData = ref({ ...props.enterpriseData })
const enterprisePhotos = ref([...props.enterprisePhotos])

// 供应商数据
const rawMaterialsData = ref({ batch: '20210718' })
const auxiliaryMaterialsData = ref({ batch: '20210718' })
const additivesData = ref({ batch: '20210718' })
const packagingMaterialsData = ref({ batch: '20210718' })

// 供应商文档
const rawMaterialsDocuments = ref<any[]>([])
const auxiliaryMaterialsDocuments = ref<any[]>([])
const additivesDocuments = ref<any[]>([])
const packagingMaterialsDocuments = ref<any[]>([])

watch(() => props.data, (val) => {
  localData.value = { ...val }
})

watch(() => props.personnelHygienePhotos, (val) => {
  personnelHygienePhotos.value = [...val]
})

watch(() => props.supplierInfoPhotos, (val) => {
  supplierInfoPhotos.value = [...val]
})

watch(() => props.enterpriseData, (val) => {
  enterpriseData.value = { ...val }
})

watch(() => props.enterprisePhotos, (val) => {
  enterprisePhotos.value = [...val]
})

// 深加工信息操作
const onEdit = () => { 
  editing.value = true 
  ElMessage.info('进入编辑模式')
}

const onSave = () => { 
  // 验证必填字段
  if (!localData.value.team || !localData.value.responsiblePerson) {
    ElMessage.warning('请填写所有必填字段')
    return
  }
  
  emit('save', localData.value)
  editing.value = false 
  ElMessage.success('深加工信息保存成功')
}

const onCancel = () => { 
  emit('cancel')
  editing.value = false 
  ElMessage.info('已取消编辑')
}

// 人员卫生情况操作
const handlePersonnelHygieneUpload = (file: File) => {
  // 验证文件类型
  if (!file.type.startsWith('image/')) {
    ElMessage.error('只能上传图片文件')
    return false
  }
  
  // 验证文件大小（5MB）
  if (file.size > 5 * 1024 * 1024) {
    ElMessage.error('图片大小不能超过5MB')
    return false
  }
  
  // 验证数量限制
  if (personnelHygienePhotos.value.length >= 9) {
    ElMessage.warning('最多只能上传9张人员卫生照片')
    return false
  }
  
  const newPhoto = {
    id: Date.now(),
    url: URL.createObjectURL(file),
    name: file.name
  }
  personnelHygienePhotos.value.push(newPhoto)
  emit('updatePersonnelHygiene', personnelHygienePhotos.value)
  ElMessage.success('人员卫生照片上传成功')
  return false
}

const removePersonnelHygienePhoto = (photo: any) => {
  const index = personnelHygienePhotos.value.findIndex(item => item.id === photo.id)
  if (index > -1) {
    personnelHygienePhotos.value.splice(index, 1)
    emit('updatePersonnelHygiene', personnelHygienePhotos.value)
    ElMessage.success('人员卫生照片删除成功')
  }
}

// 原料操作
const editRawMaterials = () => {
  editingRawMaterials.value = true
  ElMessage.info('进入编辑模式')
}

const saveRawMaterials = async () => {
  try {
    if (!rawMaterialsData.value.batch) {
      ElMessage.warning('请填写生产批次')
      return
    }
    
    editingRawMaterials.value = false
    ElMessage.success('原料信息保存成功')
  } catch (error) {
    ElMessage.error('保存失败，请重试')
  }
}

const cancelRawMaterials = () => {
  editingRawMaterials.value = false
  ElMessage.info('已取消编辑')
}

const handleRawMaterialUpload = (file: File) => {
  if (!file.type.startsWith('image/')) {
    ElMessage.error('只能上传图片文件')
    return false
  }
  
  if (file.size > 5 * 1024 * 1024) {
    ElMessage.error('图片大小不能超过5MB')
    return false
  }
  
  if (rawMaterialsDocuments.value.length >= 9) {
    ElMessage.warning('最多只能上传9张相关材料')
    return false
  }
  
  const newMaterial = {
    id: Date.now(),
    url: URL.createObjectURL(file),
    name: file.name
  }
  rawMaterialsDocuments.value.push(newMaterial)
  ElMessage.success('原料相关材料上传成功')
  return false
}

const removeRawMaterial = (material: any) => {
  const index = rawMaterialsDocuments.value.findIndex(item => item.id === material.id)
  if (index > -1) {
    rawMaterialsDocuments.value.splice(index, 1)
    ElMessage.success('原料相关材料删除成功')
  }
}

// 辅料操作
const editAuxiliaryMaterials = () => {
  editingAuxiliaryMaterials.value = true
  ElMessage.info('进入编辑模式')
}

const saveAuxiliaryMaterials = async () => {
  try {
    if (!auxiliaryMaterialsData.value.batch) {
      ElMessage.warning('请填写生产批次')
      return
    }
    
    editingAuxiliaryMaterials.value = false
    ElMessage.success('辅料信息保存成功')
  } catch (error) {
    ElMessage.error('保存失败，请重试')
  }
}

const cancelAuxiliaryMaterials = () => {
  editingAuxiliaryMaterials.value = false
  ElMessage.info('已取消编辑')
}

const handleAuxiliaryMaterialUpload = (file: File) => {
  if (!file.type.startsWith('image/')) {
    ElMessage.error('只能上传图片文件')
    return false
  }
  
  if (file.size > 5 * 1024 * 1024) {
    ElMessage.error('图片大小不能超过5MB')
    return false
  }
  
  if (auxiliaryMaterialsDocuments.value.length >= 9) {
    ElMessage.warning('最多只能上传9张相关材料')
    return false
  }
  
  const newMaterial = {
    id: Date.now(),
    url: URL.createObjectURL(file),
    name: file.name
  }
  auxiliaryMaterialsDocuments.value.push(newMaterial)
  ElMessage.success('辅料相关材料上传成功')
  return false
}

const removeAuxiliaryMaterial = (material: any) => {
  const index = auxiliaryMaterialsDocuments.value.findIndex(item => item.id === material.id)
  if (index > -1) {
    auxiliaryMaterialsDocuments.value.splice(index, 1)
    ElMessage.success('辅料相关材料删除成功')
  }
}

// 添加剂操作
const editAdditives = () => {
  editingAdditives.value = true
  ElMessage.info('进入编辑模式')
}

const saveAdditives = async () => {
  try {
    if (!additivesData.value.batch) {
      ElMessage.warning('请填写生产批次')
      return
    }
    
    editingAdditives.value = false
    ElMessage.success('添加剂信息保存成功')
  } catch (error) {
    ElMessage.error('保存失败，请重试')
  }
}

const cancelAdditives = () => {
  editingAdditives.value = false
  ElMessage.info('已取消编辑')
}

const handleAdditiveUpload = (file: File) => {
  if (!file.type.startsWith('image/')) {
    ElMessage.error('只能上传图片文件')
    return false
  }
  
  if (file.size > 5 * 1024 * 1024) {
    ElMessage.error('图片大小不能超过5MB')
    return false
  }
  
  if (additivesDocuments.value.length >= 9) {
    ElMessage.warning('最多只能上传9张相关材料')
    return false
  }
  
  const newMaterial = {
    id: Date.now(),
    url: URL.createObjectURL(file),
    name: file.name
  }
  additivesDocuments.value.push(newMaterial)
  ElMessage.success('添加剂相关材料上传成功')
  return false
}

const removeAdditive = (material: any) => {
  const index = additivesDocuments.value.findIndex(item => item.id === material.id)
  if (index > -1) {
    additivesDocuments.value.splice(index, 1)
    ElMessage.success('添加剂相关材料删除成功')
  }
}

// 包材操作
const editPackagingMaterials = () => {
  editingPackagingMaterials.value = true
  ElMessage.info('进入编辑模式')
}

const savePackagingMaterials = async () => {
  try {
    if (!packagingMaterialsData.value.batch) {
      ElMessage.warning('请填写生产批次')
      return
    }
    
    editingPackagingMaterials.value = false
    ElMessage.success('包材信息保存成功')
  } catch (error) {
    ElMessage.error('保存失败，请重试')
  }
}

const cancelPackagingMaterials = () => {
  editingPackagingMaterials.value = false
  ElMessage.info('已取消编辑')
}

const handlePackagingMaterialUpload = (file: File) => {
  if (!file.type.startsWith('image/')) {
    ElMessage.error('只能上传图片文件')
    return false
  }
  
  if (file.size > 5 * 1024 * 1024) {
    ElMessage.error('图片大小不能超过5MB')
    return false
  }
  
  if (packagingMaterialsDocuments.value.length >= 9) {
    ElMessage.warning('最多只能上传9张相关材料')
    return false
  }
  
  const newMaterial = {
    id: Date.now(),
    url: URL.createObjectURL(file),
    name: file.name
  }
  packagingMaterialsDocuments.value.push(newMaterial)
  ElMessage.success('包材相关材料上传成功')
  return false
}

const removePackagingMaterial = (material: any) => {
  const index = packagingMaterialsDocuments.value.findIndex(item => item.id === material.id)
  if (index > -1) {
    packagingMaterialsDocuments.value.splice(index, 1)
    ElMessage.success('包材相关材料删除成功')
  }
}

// 企业信息操作
const editEnterprise = () => {
  editingEnterprise.value = true
  ElMessage.info('进入编辑模式')
}

const saveEnterprise = async () => {
  try {
    if (!enterpriseData.value.companyName || !enterpriseData.value.productionLicenseNumber) {
      ElMessage.warning('请填写所有必填字段')
      return
    }
    
    emit('updateEnterprise', enterpriseData.value)
    editingEnterprise.value = false
    ElMessage.success('企业信息保存成功')
  } catch (error) {
    ElMessage.error('保存失败，请重试')
  }
}

const cancelEnterprise = () => {
  editingEnterprise.value = false
  ElMessage.info('已取消编辑')
}

// 企业照片操作
const handlePhotoUpload = (file: File) => {
  if (!file.type.startsWith('image/')) {
    ElMessage.error('只能上传图片文件')
    return false
  }
  
  if (file.size > 5 * 1024 * 1024) {
    ElMessage.error('图片大小不能超过5MB')
    return false
  }
  
  if (enterprisePhotos.value.length >= 9) {
    ElMessage.warning('最多只能上传9张企业照片')
    return false
  }
  
  const newPhoto = {
    id: Date.now(),
    url: URL.createObjectURL(file),
    name: file.name
  }
  enterprisePhotos.value.push(newPhoto)
  emit('updatePhotos', enterprisePhotos.value)
  ElMessage.success('企业照片上传成功')
  return false
}

const removePhoto = (photo: any) => {
  const index = enterprisePhotos.value.findIndex(item => item.id === photo.id)
  if (index > -1) {
    enterprisePhotos.value.splice(index, 1)
    emit('updatePhotos', enterprisePhotos.value)
    ElMessage.success('企业照片删除成功')
  }
}
</script>

<script lang="ts">
export default {
  name: 'ProcessingInfo'
}
</script>

<style scoped>
.processing-info {
  padding: 20px;
  overflow-y: auto;
}

.info-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background: #fff;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.info-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.info-count {
  font-size: 12px;
  color: #909399;
  font-weight: normal;
}

.info-actions {
  display: flex;
  gap: 8px;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-item label {
  min-width: 100px;
  font-weight: 500;
  color: #606266;
}

.sub-section {
  margin-top: 20px;
}

.sub-title {
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.photo-item {
  position: relative;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
}

.photo-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
}

.remove-btn:hover {
  background: rgba(245, 108, 108, 0.8);
}

.add-photo {
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  cursor: pointer;
  transition: border-color 0.3s;
}

.add-photo:hover {
  border-color: #409eff;
}

.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.supplier-subsection {
  margin-bottom: 30px;
  padding: 16px;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  background: #fafafa;
}

.supplier-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.supplier-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.supplier-actions {
  display: flex;
  gap: 8px;
}

.supplier-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.supplier-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.supplier-info label {
  min-width: 80px;
  font-weight: 500;
  color: #606266;
}

.materials-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.materials-section label {
  font-weight: 500;
  color: #606266;
}

.materials-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

.material-item {
  position: relative;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  overflow: hidden;
}

.material-img {
  width: 100%;
  height: 80px;
  object-fit: cover;
}

.add-material {
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  cursor: pointer;
  transition: border-color 0.3s;
}

.add-material:hover {
  border-color: #409eff;
}

.upload-area {
  text-align: center;
  color: #909399;
}

.upload-area .el-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.upload-tip {
  font-size: 10px;
  color: #c0c4cc;
  margin-top: 2px;
}

.enterprise-photos {
  margin-top: 20px;
}

.image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
}

.image-placeholder .el-icon {
  font-size: 24px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .info-header,
  .supplier-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .info-actions,
  .supplier-actions {
    justify-content: center;
  }
  
  .photo-gallery {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
  
  .materials-gallery {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  
  .action-buttons {
    justify-content: center;
  }
}
</style> 